<template>
  <div class="product-list">
    <h2>产品列表</h2>
    <div class="product-cate">
      <span>选择产品</span>
      <el-select v-model="cate" placeholder="请选择">
        <el-option
          v-for="item in cateOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <i class="el-icon-search"></i>
    </div>
    <el-table :data="productData" style="width: 100%">
      <el-table-column prop="productName" label="产品名称"></el-table-column>
      <el-table-column prop="productType" label="产品类型"></el-table-column>
      <el-table-column prop="productKey" label="产品key"></el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column prop="status" label="产品状态"></el-table-column>
      <el-table-column prop="productId" label="ID"></el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "product-list",
  data() {
    return {
      productData: [
        {
          productName: "智能空调",
          productType: "空调机",
          productKey: "alryueelgzl",
          createTime: "20180907",
          status: "已发布",
          productId: "541145",
          remark: "666"
        },
        {
          productName: "智能空调",
          productType: "空调机",
          productKey: "alryueelgzl",
          createTime: "20180907",
          status: "已发布",
          productId: "541145",
          remark: "666"
        },
        {
          productName: "智能空调",
          productType: "空调机",
          productKey: "alryueelgzl",
          createTime: "20180907",
          status: "已发布",
          productId: "541145",
          remark: "666"
        },
        {
          productName: "智能空调",
          productType: "空调机",
          productKey: "alryueelgzl",
          createTime: "20180907",
          status: "已发布",
          productId: "541145",
          remark: "666"
        }
      ],
      cateOptions: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      cate: ""
    };
  }
};
</script>

<style lang="less">
@import "../../style/color.less";
.product-list {
  .product-cate{
    text-align: left;
    margin: 15px 0;
    padding-bottom: 60px;
    border-bottom: 1px solid #ebeef5;
    .el-input__inner{
      height: 30px;
      line-height: 30px;
    }
    .el-input__icon{
      line-height: 30px;
    }
    .el-icon-search{
     font-size: 26px;
     position: relative;
     top: 4px; 
    }
  }
  h2 {
    text-align: left;
  }
  .el-table td, .el-table th.is-leaf{
    border: none;
  }
  .el-table::before{
    height: 0;
  }
  .el-table thead{
    color: #333333;
  }
}
</style>